<!-- 组件6：指定栏目及其子栏目下的文章列表信息 -->
<template>
  <!-- 栏目文章列表组件 -->
  <CmsCategoryTopNArticles :category="category" :articles="currentArticles.articles" />
</template>
<script lang="ts">
  import { defineComponent, ref, reactive, onMounted } from 'vue';

  import { getDisplayCategoryArticles } from '/@/api/cms/display';

  import CmsCategoryTopNArticles from './CmsCategoryTopNArticles.vue';

  import { useGlobSetting } from '/@/hooks/setting';

  export default defineComponent({
    name: 'CmsCategoriesTopNArticles',
    components: { CmsCategoryTopNArticles },
    props: {
      category: {},
    },
    setup(props) {
      const currentArticles = reactive({
        articles: [],
      });

      const { globalProjectCode } = useGlobSetting();
      const projectCode = ref<String>(globalProjectCode);

      console.log('CmsCategoriesTopNArticles.vue get props category', props.category);

      onMounted(() => {
        getTopNArticles();
      });

      function getTopNArticles() {
        // console.log('栏目信息', props.category.id);
        getDisplayCategoryArticles(props.category.id)
          .then((res) => {
            // console.log('文章信息', res.articles);
            currentArticles.articles = res.articles;
          })
          .catch((ex) => {
            console.log('getDisplayCategoryArticles ex', ex);
          });
      }

      return {
        props,
        projectCode,
        getTopNArticles,
        currentArticles,
      };
    },
  });
</script>
<style scoped lang="less">
  // @import './cms.less';
  //覆盖antd的默认演示，解决头部高度过大的问题
  .ant-list:deep(.ant-list-header) {
    // line-height: 1;
    padding-bottom: 0px;
  }
</style>
